import { useState } from "react";
import { Radio, RadioChangeEvent } from "antd";
import { useAppDispatch } from "apis/module/store";
import { setTheme } from "apis/module/store/slices/appSlice";
import { lgTheme, commTheme } from "theme";

export default () => {
  const [themeName, setThemeName] = useState("common");
  const dispatch = useAppDispatch();

  const options = [
    { label: "正常版本", value: "common" },
    { label: "放大版本", value: "lg" },
  ];

  const onChangeTheme = ({ target: { value } }: RadioChangeEvent) => {
    setThemeName(value);
    if (value === "common") {
      dispatch(setTheme(commTheme));
    } else {
      dispatch(setTheme(lgTheme));
    }
  };

  return (
    <Radio.Group
      options={options}
      onChange={onChangeTheme}
      value={themeName}
      optionType="button"
      buttonStyle="solid"
    />
  );
};
